<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Datepicker - UIkit tests</title>

        <script src="../_test.js"></script>
        <script src="../../src/js/components/datepicker.js"></script>
        <script src="../../src/js/components/form-select.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Datepicker</h1>

            <form class="uk-form">

                <div class="uk-form-row">
                    <label class="uk-form-label" for="form-date">Date</label>
                    <div class="uk-form-controls">
                        <input type="text" id="form-date" data-uk-datepicker="{format:'DD.MM.YYYY'}">
                    </div>
                </div>

                <div class="uk-form-row">
                    <label class="uk-form-label" for="form-date">Date</label>
                    <div class="uk-form-controls">
                        <input type="text" data-uk-datepicker="{format:'DD.MM.YYYY', minDate:0, maxDate:7}">
                        <p class="uk-form-help-block">Only allowed current date + 7 days</p>
                    </div>
                </div>

                <div class="uk-form-row">
                    <label class="uk-form-label" for="form-date">Date</label>
                    <div class="uk-form-controls">
                        <input type="text" data-uk-datepicker="{format:'DD.MM.YYYY', minDate:0, maxDate:'31.12.2015'}">
                        <p class="uk-form-help-block">Only allowed current date + until 31.12.2015</p>
                    </div>
                </div>

                <div class="uk-form-row">
                    <script>
                        UIkit.ready(function () {
                            var date1 = UIkit.datepicker(UIkit.$('#date1'));
                            date1.on('change.uk.datepicker', function () {
                                UIkit.$('#output-date1').text(date1.current.format('DD.MM.YYYY'));
                            });
                        });
                    </script>

                    <label class="uk-form-label" for="form-date">Date</label>
                    <div class="uk-form-controls">
                        <input type="text" data-uk-datepicker="{format:'DD-MM-YYYY'}" id="date1">
                        <p class="uk-form-help-block">Value <code>this.current</code> after 'change' event: <span id="output-date1"></span></p>
                    </div>
                </div>

                <div class="uk-form-row">
                    <label class="uk-form-label" for="form-date">Date</label>
                    <div class="uk-form-controls">
                        <input type="text" data-uk-datepicker="{format:'DD.MM.YYYY', pos: 'top'}">
                        <p class="uk-form-help-block">Always above</p>
                    </div>
                </div>

                <div class="uk-form-row">
                    <label class="uk-form-label" for="form-date">Date</label>
                    <div class="uk-form-controls">
                        <input type="text" data-uk-datepicker="{format:'DD.MM.YYYY', pos: 'bottom'}">
                        <p class="uk-form-help-block">Always under</p>
                    </div>
                </div>

                <div class="uk-form-row">
                    <label class="uk-form-label" for="form-date">Date</label>
                    <div class="uk-form-controls">
                        <input type="text" data-uk-datepicker="{format:'DD.MM.YYYY', minDate:-7, maxDate:7}">
                        <p class="uk-form-help-block">Only allowed current date +- 7 days, default date should be today</p>
                    </div>
                </div>

                <div class="uk-form-row">
                    <label class="uk-form-label" for="form-date">Date</label>
                    <div class="uk-form-controls">
                        <input type="text" data-uk-datepicker="{format:'DD.MM.YYYY', minDate:'01.10.2016'}">
                        <p class="uk-form-help-block"><code>minDate:'01.10.2016'</code>, default date should be today</p>
                    </div>
                </div>

            </form>

        </div>

    </body>
</html>